<template>
  <div class="c-p15">
    <view v-if="list.length > 0">
      <view class="c-flex c-flex-between">
        <view @click="show = true"
          ><text class="c-mr10">{{ text }}</text>
          <u-icon name="arrow-down-fill" size="20"></u-icon>
        </view>
      </view>
      <view class="mt15" v-for="item in list" :key="item.id">
        <quanItem @ling="ling" :item="item"></quanItem>
      </view>
    </view>
    <view class="c-mt100" v-else>
      <u-empty text="尚无优惠券" mode="list"></u-empty>
    </view>
    <u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true" height="590">
      <view class="c-mt60 c-fw600">
        <view class="c-text-center">类型</view>
      </view>
      <view class="youBox">
        <view class="c-flex c-mt30 c-flex-between">
          <view
            class="quanbox"
            :style="{
              color: active == 'all' ? '#FF6A21' : '#000',
              background: active == 'all' ? '#FFE1D3' : '#eee',
              border: active == 'all' ? '1px solid #FF6A21' : ' 2px solid rgba(0,0,0,0)'
            }"
            @click="choose('all')"
            >全部类型</view
          >
          <view
            class="quanbox"
            :style="{
              color: active == 'zhekou' ? '#FF6A21' : '#000',
              background: active == 'zhekou' ? '#FFE1D3' : '#eee',
              border: active == 'zhekou' ? '1px solid #FF6A21' : ' 2px solid rgba(0,0,0,0)'
            }"
            @click="choose('zhekou')"
            >折扣券</view
          >
        </view>
        <view class="c-flex c-mt60 c-flex-between">
          <view
            class="quanbox"
            :style="{
              color: active == 'manjian' ? '#FF6A21' : '#000',
              background: active == 'manjian' ? '#FFE1D3' : '#eee',
              border: active == 'manjian' ? '1px solid #FF6A21' : ' 2px solid rgba(0,0,0,0)'
            }"
            @click="choose('manjian')"
            >满减券</view
          >
        </view>
      </view>
    </u-popup>
    <view class="success" v-if="success">
      领取成功，请在我的优惠券中查看
    </view>
  </div>
</template>
<script>
  import quan from '@/services/youhuiquan'
  import quanItem from '@/commponents/youhuiquan/index'

  export default {
    components: {quanItem},
    data() {
      return {
        wNum: '',
        list: [],
        show: false,
        active: 'all',
        text: '全部类型',
        scrollCol: '',
        search: {
          page: 1,
          limit: 10
        },
        success: false
      }
    },
    methods: {
      ling(id) {
        quan.save(id).then(() => {
          // wx.showToast({
          //   title: '领取成功，在我的优惠券中查看',
          //   duration: 2000
          // })
        })
        this.search.page = 1
        this.getList(true)
      },
      choose(type) {
        this.active = type
        if (type === 'all') {
          this.search = {
            discountType: '1,2',
            page: 1,
            limit: 10
          }
          this.text = '全部类型'
        }
        if (type === 'zhekou') {
          this.search = {
            discountType: '1',
            page: 1,
            limit: 10
          }
          this.text = '折扣券'
        }
        if (type === 'manjian') {
          this.search = {
            discountType: '2',
            page: 1,
            limit: 10
          }
          this.text = '满减券'
        }
        this.show = false
        this.getList(true)
      },
      getList(type) {
        if (type) {
            this.list = []
          }
        quan.list(this.search).then(data => {
          if(type) {
            this.success = true
          setTimeout(()=>{
            this.success = false
          },2000)
          }
          this.list.push(...data.list)
          this.list.forEach((item, index) => {
            this.list[index].wNum = item.productList.length * 40
            this.list[index].scrollCol = item.productList.length
          })
        })
      }
    },
    mounted() {
      this.getList()
    },
    onReachBottom() {
      this.search.page++
      this.getList()
    }
  }
</script>
<style lang="scss" scoped>
  .success{
    position: fixed;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    width: 60%;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .c-flex {
    display: flex;
  }
  .c-w70 {
    width: 70%;
  }
  .c-flex-between {
    justify-content: space-between;
  }
  .c-p15 {
    padding: 30rpx;
  }
  .goodsBox {
    width: 100%;
  }
  .c-mr10 {
    margin-right: 10rpx;
  }
  .mt15 {
    margin-top: 15px;
  }
  .c-fs-20 {
    font-size: 20rpx;
  }
  .xiao {
    width: 100%;
    height: 200rpx;
  }
  .lingqu {
    right: 10px;
    top: 35px;
    button {
      width: 153rpx;
      font-size: 12px;
      padding: 0;
      margin: 0;
      border: 0;
      color: #fff;
      background: #ff6a21;
      border-radius: 80px;
    }
  }
  .youBox {
    width: 80%;
    margin: 70rpx auto;
  }
  .da {
    width: 100%;
    height: 390rpx;
  }
  .xiaoBox {
    top: 0px;
    width: 100%;
    height: 200rpx;
    line-height: 170rpx;
    padding-left: 22px;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .daBox {
    top: 0px;
    width: 100%;
    background: gray;
    height: 390rpx;
    padding-left: 10px;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .dayou {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    height: 345rpx;
    width: 94%;
  }
  .quanbox {
    width: 258rpx;
    height: 60rpx;
    text-align: center;
    background: #eee;
    line-height: 60rpx;
    font-size: 13px;
    border-radius: 3px;
  }
  .scroll {
    width: 100%;
    overflow: auto;
  }
  .c-w22 {
    width: 22%;
  }
</style>
